<template>
  <div class="home">
    <router-view class="con"></router-view>
    <div class="nav">
      <router-link to="/home/index" tag='span'>
      <i class="iconfont icon-shouye"></i>
      首页
      </router-link>
        <router-link to="/home/index" tag='span'>
      <i class="iconfont icon-shouye"></i>
      分类
      </router-link>
      <router-link to="/home/shop" tag='span'>
      <i class="iconfont icon-shouye1"></i>
        购物车
      </router-link>
      <router-link to="/home/my" tag='span'>
      <i class="iconfont icon-wode"></i>
        我的
      </router-link>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
    // HelloWorld
  }
}
</script>
<style scoped>
 .home{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.nav{
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #ddd;
}
.con{
  flex: 1;
} 
.router-link-active{
  color: #09f;
}
</style>